<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示ArcGis服务地图</title>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const projection = ol.proj.get('EPSG:3857');
    //基础地图服务切片地址
    const tileUrl = `http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}`;
    // 坐标原点
    const origin = [-2.0037508342787E7, 2.0037508342787E7];
    // 分辨率
    const resolutions = [
        156543.03392800014,
        78271.51696399994,
        39135.75848200009,
        19567.87924099992,
        9783.93962049996,
        4891.96981024998,
        2445.98490512499,
        1222.992452562495,
        611.4962262813797,
        305.74811314055756,
        152.87405657041106,
        76.43702828507324,
        38.21851414253662,
        19.10925707126831,
        9.554628535634155,
        4.77731426794937,
        2.388657133974685,
        1.1943285668550503,
        0.5971642835598172,
        0.29858214164761665,
        0.14929107082380833,
        0.07464553541190416,
        0.03732276770595208,
        0.01866138385297604
    ];
    // 地图范围
    const fullExtent = [-2.0037507067161843E7, -1.9971868880408604E7, 2.0037507067161843E7, 1.99718688804085E7];
    const tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin,
        extent: fullExtent,
        resolutions
    });
    // 瓦片数据源
    const tileArcGISXYZ = new ol.source.XYZ({
        tileGrid,
        projection,
        url: tileUrl
    });

    const center = ol.proj.transform([120.01284688555289, 30.40903989508352], 'EPSG:4326', 'EPSG:3857');

    const olMap = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: tileArcGISXYZ
            })
        ],
        view: new ol.View({
            // 初始化中心点坐标
            center,
            resolutions,
            zoom: 12,
            projection,
            extent: fullExtent
        })
    });
</script>
</body>
</html>